<template>
	<div>
		<sh-card title="按钮" class="mb-3">
			<p>
				<vxe-button type="text" content="默认颜色"></vxe-button>
				<vxe-button type="text" status="primary" content="主要颜色"></vxe-button>
				<vxe-button type="text" status="success" content="成功颜色"></vxe-button>
				<vxe-button type="text" status="info" content="信息颜色"></vxe-button>
				<vxe-button type="text" status="warning" content="警告颜色"></vxe-button>
				<vxe-button type="text" status="danger" content="危险颜色"></vxe-button>
			</p>
			<p>
				<vxe-button content="默认颜色"></vxe-button>
				<vxe-button status="primary" content="主要颜色"></vxe-button>
				<vxe-button status="success" content="成功颜色"></vxe-button>
				<vxe-button status="info" content="信息颜色"></vxe-button>
				<vxe-button status="warning" content="警告颜色"></vxe-button>
				<vxe-button status="danger" content="危险颜色"></vxe-button>
			</p>
			<div>
				<vxe-button content="圆角按钮" round></vxe-button>
				<vxe-button content="圆角按钮" loading round></vxe-button>
				<vxe-button content="主要颜色" status="primary" round></vxe-button>
				<vxe-button content="成功颜色" status="success" round></vxe-button>
				<vxe-button content="信息颜色" status="info" round></vxe-button>
				<vxe-button content="警告颜色" status="warning" round></vxe-button>
				<vxe-button content="危险颜色" status="danger" round></vxe-button>
			</div>
			<div>
				<p>
					<vxe-button type="text" icon="vxe-icon-add"></vxe-button>
					<vxe-button type="text" status="primary" icon="vxe-icon-delete"></vxe-button>
					<vxe-button type="text" status="success" icon="vxe-icon-print"></vxe-button>
					<vxe-button type="text" status="info" icon="vxe-icon-question-circle"></vxe-button>
					<vxe-button type="text" status="warning" icon="vxe-icon-search"></vxe-button>
					<vxe-button type="text" status="danger" icon="vxe-icon-save"></vxe-button>
				</p>
				<p>
					<vxe-button type="text" content="默认颜色" icon="vxe-icon-add"></vxe-button>
					<vxe-button type="text" status="primary" content="主要颜色" icon="vxe-icon-delete"></vxe-button>
					<vxe-button type="text" status="success" content="成功颜色" icon="vxe-icon-print"></vxe-button>
					<vxe-button type="text" status="info" content="信息颜色" icon="vxe-icon-question-circle"></vxe-button>
					<vxe-button type="text" status="warning" content="警告颜色" icon="vxe-icon-search"></vxe-button>
					<vxe-button type="text" status="danger" content="危险颜色" icon="vxe-icon-save"></vxe-button>
				</p>
				<p>
					<vxe-button icon="vxe-icon-add" circle></vxe-button>
					<vxe-button status="primary" icon="vxe-icon-delete" circle></vxe-button>
					<vxe-button status="success" icon="vxe-icon-print" circle></vxe-button>
					<vxe-button status="info" icon="vxe-icon-question-circle" circle></vxe-button>
					<vxe-button status="warning" icon="vxe-icon-search" circle></vxe-button>
					<vxe-button status="danger" icon="vxe-icon-save" circle></vxe-button>
				</p>
				<p>
					<vxe-button content="默认颜色" icon="vxe-icon-add"></vxe-button>
					<vxe-button status="primary" content="主要颜色" icon="vxe-icon-delete"></vxe-button>
					<vxe-button status="success" content="成功颜色" icon="vxe-icon-print"></vxe-button>
					<vxe-button status="info" content="信息颜色" icon="vxe-icon-question-circle"></vxe-button>
					<vxe-button status="warning" content="警告颜色" icon="vxe-icon-search"></vxe-button>
					<vxe-button status="danger" content="危险颜色" icon="vxe-icon-save"></vxe-button>
				</p>
			</div>
		</sh-card>
		<sh-card title="输入框" class="mb-3">
			<div>
				<vxe-input v-model="val1" placeholder="默认尺寸"></vxe-input>
				<vxe-input v-model="val2" placeholder="中等尺寸" size="medium"></vxe-input>
				<vxe-input v-model="val3" placeholder="小型尺寸" size="small"></vxe-input>
				<vxe-input v-model="val4" placeholder="超小尺寸" size="mini"></vxe-input>
			</div>
			<div>
				<vxe-input v-model="val1" placeholder="可清除" clearable></vxe-input>
				<vxe-input v-model="val2" placeholder="带图标" prefix-icon="vxe-icon-chat" suffix-icon="vxe-icon-user" clearable></vxe-input>
				<vxe-input v-model="val3" placeholder="只读的" suffix-icon="vxe-icon-warning-triangle-fill" readonly></vxe-input>
				<vxe-input v-model="val4" placeholder="禁用的" prefix-icon="vxe-icon-warnion-circle-fill" disabled></vxe-input>
			</div>
			<div>
				<vxe-input v-model="val1" placeholder="密码类型" type="password"></vxe-input>
				<vxe-input v-model="val2" placeholder="可清除" type="password" clearable></vxe-input>
			</div>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseEmpty',
	data() {
		return {
			val1: '',
			val2: '',
			val3: '',
			val4: ''
		}
	}
}
</script>

<style scoped lang="scss"></style>
